<template>
  <div>
    <PageTitleSearch
      :title="title"
      :hotelList="hotelList"
      :currentHotel="currentHotel"
      v-model:lastMonth="lastMonth"
      :currentAcc="currentAcc"
      :is-acc="false"
      @hotel-change="handleSelectChange"
      @date-change="handleDateSelect"
      @acc-change="handleAccSelect"
    />
    <div class="main-content">
      <FlexCard title="酒店预测准确率" :loading="loading" :dataList="dataList" style="margin-bottom: 10px">
        <LineRateChart
          v-if="dataList.length > 0"
          :dataList="dataList"
          formatter="currencyWNFormatter|0"
          :seriesNames="['实际', '预测', '准确率']"
          :showLast="false"
        />
        <div class="footer-tips">注：1.“实际”-取自日报当月实际收入；2.“预测”-取自上月酒店月度报告填报“M+1预测收入”；准确率%=实际/预测-1。</div>
      </FlexCard>
      <ReportRemarkCard class="flex-height" title="说明" :loading="loading" :reportCode="reportCode" :reportName="reportName" />
    </div>
  </div>
</template>

<script>
  import dayjs from 'dayjs';
  import { defHttp } from '/@/utils/http/axios';
  import FlexCard from '@/views/applications/ui/FlexCard.vue';
  import ReportRemarkCard from '@/views/applications/ui/ReportRemarkCard.vue';
  import LineRateChart from '@/views/applications/ui/LineRateChart.vue';
  import PageTitleSearch from '@/views/applications/ui/PageTitleSearch.vue';
  const REPORT_NAME = '酒店预测准确率';
  const REPORT_CODE = 'hotel-month-single-forecastrate';

  export default {
    name: REPORT_NAME,

    components: {
      FlexCard,
      ReportRemarkCard,
      LineRateChart,
      PageTitleSearch,
    },

    data() {
      return {
        title: '酒店预测准确率',
        reportName: '',
        loading: false,
        lastMonth: dayjs().subtract(1, 'month').format('YYYYMM'),
        hotelList: [],
        currentHotel: {},
        dataList: [],
      };
    },

    created() {
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }).then((res) => {
        if (res.success && res.result.length > 0) {
          this.hotelList = res.result.map((hotel) => ({
            label: hotel.name,
            value: hotel.code,
          }));
          if (this.hotelList.length > 0 && this.lastMonth) {
            this.currentHotel = {
              code: this.hotelList[0].value,
              name: this.hotelList[0].label,
            };
            this.reportCode = `${REPORT_CODE}-${this.currentHotel.code}-${this.lastMonth}`;
            this.reportName = `${REPORT_NAME}-${this.currentHotel.name}-${this.lastMonth}`;
            this.fetchData();
          }
        }
      });
    },
    methods: {
      fetchData() {
        this.loading = true;
        defHttp
          .post({
            url: '/data/query',
            data: {
              labelCode: 'getHotelMonthForecastRate',
              sqlParams: [
                { key: 'code', value: this.currentHotel.code },
                { key: 'month', value: this.lastMonth },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          })
          .then((res) => {
            if (res.datas.success && res.datas.data.length > 0) {
              const rawData = res.datas.data;
              const sumData = rawData.reduce(
                (acc, item) => {
                  acc.actual += item.actual;
                  acc.forecast += item.forecast;
                  return acc;
                },
                { actual: 0, forecast: 0 }
              );
              this.dataList = [
                ...rawData.map((item) => ({
                  name: dayjs(item.month, 'YYYYMM').format('M月'),
                  value: item.actual,
                  value2: item.forecast,
                })),
                { name: '总计', value: sumData.actual, value2: sumData.forecast },
              ];
            } else {
              this.dataList = [];
            }
            this.loading = false;
          });
      },

      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },

      handleSelectChange(value) {
        this.currentHotel = {
          code: value,
          name: this.hotelList.filter((h) => h.value === value)[0].label,
        };
        this.reportCode = `${REPORT_CODE}-${this.currentHotel.code}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${this.currentHotel.name}-${this.lastMonth}`;
        this.fetchData();
      },

      isMonthDisabled(current) {
        const lastMonth = dayjs().subtract(1, 'month').endOf('month');
        return current && current > lastMonth;
      },

      handleDateSelect(date) {
        this.lastMonth = date;
        this.reportCode = `${REPORT_CODE}-${this.currentHotel.code}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${this.currentHotel.name}-${this.lastMonth}`;
        this.fetchData();
      },
    },
  };
</script>

<style lang="less" scoped>
  .main-content {
    padding: 12px 0;

    &-title {
      &-custom {
        color: #00b578;
      }
    }
  }

  .card-double {
    display: flex;
    margin: 12px 0 12px 0;
    justify-content: space-between;

    &-item {
      flex-basis: 48%;
    }
  }

  .interval-area {
    margin-bottom: 12px;
  }

  .select-title-space {
    width: 200px;
    margin-right: 20px;
  }

  ::v-deep .select-title .van-cell {
    color: hsl(217, 16%, 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: unset;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-color: #112c4d;
  }

  ::v-deep .a-mobile-select .van-cell__value {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    padding-right: 0.5rem;
    text-align: center;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  ::v-deep .a-mobile-select .van-cell .select-suffix-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1rem;
    color: #8894a8;
  }

  .popup-right {
    width: auto;

    &-content {
      height: 800px;
      width: 318px;

      &-oprate {
        display: flex;
        padding: 16px;
        justify-content: center;

        &-item {
          width: 100%;
          margin-right: 10px;
        }

        &-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  @media @desktop {
    .row-content {
      display: flex;
    }

    .main-frame-desktop-header {
      padding: 1rem;
      background: #fff;
      overflow: hidden;
    }

    .a-layout-form-vertical,
    .a-layout-form-horizontal {
      width: 30rem;
      margin: 0 auto 5rem auto;
    }

    .echarts {
      width: 100%;
      height: 450px;
    }
  }
  .footer-tips {
    font-size: 10px;
    color: #000;
    margin-left: 17px;
  }
</style>
